import React, {useEffect, useState} from 'react';
import {View, Text, TouchableOpacity, ScrollView, Image} from 'react-native';
import {navigate} from '../../navigator/RootNavigation';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import {Icon} from '@ant-design/react-native';
import Banner from '../../components/Banner';
import SearchHeadIcon from '../../components/SearchHeadIcon';
import {getTreelist} from '../../service/common';
import {inquiryList} from '../../service/user';
import BaseUrl from '../../config/BaseUrl';

const TBConsult = () => {
  const navigation = useNavigation();
  const [newList, setNewList] = useState([]);
  const [treelist, setTreelist] = useState([]);
  const [nodeId, setNodeId] = useState('');

  useEffect(() => {
    navigation.setOptions({
      title: 'TB咨询',
      headerRight: () => (
        <TouchableOpacity
          onPress={() => navigation.push('AskQuestion')}
          style={{marginRight: 10}}>
          <Text>我要提问</Text>
        </TouchableOpacity>
      ),
    });
    navigation.addListener('focus', () => {
      getTreelist({type: 1007}).then((res) => {
        console.log(res);
        setTreelist(res.data);
        setNodeId(res.data[0].nodeId);
  
        inquiryList({type: nodeId, pn: 1, ps: 10}).then((res2) => {
          console.log(res2);
          setNewList(res2.rows);
        });
      });
    });
  }, [navigation]);

  return (
    <AreaView>
      <ScrollView style={styles.container}>
        <View style={styles.wrapper_container}>
          <Banner />
        </View>
        <View style={styles.tabs_container}>
          {/* <TouchableOpacity  activeOpacity={1} style={styles.btn}>
            <Text style={[styles.btn_text, styles.btn_text_selected]}>
              已选课程
            </Text>
            <View style={styles.selected} />
          </TouchableOpacity>
          <TouchableOpacity  activeOpacity={1} style={styles.btn}>
            <Text style={styles.btn_text}>已选课程</Text>
          </TouchableOpacity> */}
          {(treelist || []).map((item) => (
            <TouchableOpacity
              style={styles.btn}
              key={item.nodeId}
              onPress={() => {
                setNodeId(item.nodeId);
                inquiryList({type: item.nodeId, pn: 1, ps: 10}).then((res2) => {
                  console.log(res2);
                  setNewList(res2.rows);
                });
              }}>
              <Text
                style={[
                  styles.btn_text,
                  nodeId === item.nodeId && styles.btn_text_selected,
                ]}>
                {item?.nodeName}
              </Text>
              {nodeId === item.nodeId && <View style={styles.selected} />}
            </TouchableOpacity>
          ))}
        </View>
        <View style={styles.tab_content}>
          <View style={styles.list_container}>
            {(newList || []).map((item) => (
              <View style={styles.list} key={item.id}>
                <View style={styles.list_head}>
                  <Image
                    style={styles.avatar}
                    source={{uri: BaseUrl.imgurl + item?.portrait}}
                  />
                  <View style={styles.info}>
                    <Text style={styles.info_name}>{item.createdName}</Text>
                    <Text style={styles.info_time}>{item.createdTime}</Text>
                  </View>
                </View>
                <View style={styles.topic}>
                  <Text>
                    <Text style={styles.topic_text}>咨询内容：</Text>{' '}
                    {item?.content?.replace(/<\/?.+?\/?>/g, '')}
                  </Text>
                </View>
                <TouchableOpacity
                  activeOpacity={1}
                  style={styles.small_title_container}
                  onPress={() => {
                    navigation.push('TBConsultDetail', {
                      id: item.id,
                    });
                  }}>
                  <Text style={styles.small_title}>点击查看详情</Text>
                  <Icon style={styles.detail_icon} name="double-right" />
                </TouchableOpacity>
              </View>
            ))}
            {/* <View style={styles.list}>
              <Text style={styles.big_title} numberOfLines={2}>
                有句话说的好，颈椎不舒服，很多疾病都会随之找上门来，虽然这有一点夸大的成分，但是也从侧面说明了?
              </Text>
              <View style={styles.small_title_container}>
                <Text style={styles.small_title}>吴楠老师回答了这个问题</Text>
                <Icon style={styles.detail_icon} name="double-right" />
              </View>
            </View> */}
          </View>
        </View>
      </ScrollView>
    </AreaView>
  );
};

export default TBConsult;
